<template>
  <page :better-scroll="true" page-background="white">
    <search-header
      slot="top"
      :step="step"
      :searchKey="searchKey"
      @search="search"
      @key-change="change"></search-header>
    <search-default
      :hot="hot"
      :history="history"
      @select-hot="selectHot"
      @select-history="selectHistory"
      @clear-history="clearHistory"
      v-if="step === 1"></search-default>
    <search-auto
      :recommend="recommend"
      :searchList="searchList"
      v-if="step === 2"></search-auto>
    <search-list
      :list="searchList"
      v-if="step === 3"></search-list>
  </page>
</template>

<script type="text/ecmascript-6">
  import {mapActions} from 'vuex'
  import session from '@/libs/session'
  import searchHeader from './search-header'
  import searchDefault from './search-default'
  import searchAuto from './search-auto'
  import searchList from './search-list'

  export default {
    data() {
      return {
        step: 1,
        searchKey: '元代陶瓷',
        hot: [],
        history: session.getHistory(),
        recommend: null,
        searchList: [
          {
            pic: require('@/static/images/product/p1.jpg'),
            name: '元代釉里红盘口梅瓶',
            desc: '藏品规格：口径：7.1cm 低径：12cm 高：33.5cm / 藏品编号：15e1b54989e3f9bb05312e6bc959951b2574878cccf0514c6903e775160c9d19',
            price: '29900'
          },
          {
            pic: require('@/static/images/product/p1.jpg'),
            name: '元代釉里红盘口梅瓶',
            desc: '藏品规格：口径：7.1cm 低径：12cm 高：33.5cm / 藏品编号：15e1b54989e3f9bb05312e6bc959951b2574878cccf0514c6903e775160c9d19',
            price: '29900'
          },
          {
            pic: require('@/static/images/product/p1.jpg'),
            name: '元代釉里红盘口梅瓶',
            desc: '藏品规格：口径：7.1cm 低径：12cm 高：33.5cm / 藏品编号：15e1b54989e3f9bb05312e6bc959951b2574878cccf0514c6903e775160c9d19',
            price: '29900'
          }
        ]
      }
    },
    components: {
      searchHeader,
      searchDefault,
      searchAuto,
      searchList
    },
    methods: {
      ...mapActions('search', ['getSearchHot', 'getSearchListBykeyword']),
      change(key) {
        this.getSearchListBykeyword(key).then(res => {
          this.recommend = res.recommend
          this.searchList = res.hot
          this.step = 2
        })
      },
      search(val) {
        if (val) {
          this.step = 3
          session.addHistory(val)
        } else {
          this.$toast('搜索关键字不能为空', 'warn')
        }
      },
      selectHot(o) {
        // @TODO
      },
      selectHistory(s) {
        this.getSearchListBykeyword(s).then(res => {
          this.recommend = res.recommend
          this.searchList = res.hot
          this.searchKey = s
          this.step = 3
        })
      },
      clearHistory() {
        session.clearHistory()
        this.history = []
      },
      init() {
        this.getSearchHot().then(res => {
          this.hot = res
        })
      }
    },
    created() {
      this.init()
    }
  }
</script>
